<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
	<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/axios.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<table class="table">
			<tr>
				<th>编号</th>
				<th>标题</th>
				<th>地址</th>
				<th>图片</th>
				<th>排序</th>
				<th>状态</th>
				<th>发布人</th>
			</tr>
			<tr v-for="v in news">
				<td>{{v.ID}}</td>
				<td>{{v.Title}}</td>
				<td>{{v.Address}}</td>
				<td><img :src="v.Img" width="100px"></td>
				<td>{{v.Order}}</td>
				<td>{{v.Status}}</td>
				<td>{{v.People}}</td>
			</tr>
		</table>
		<input type="button" value="上一页" @click="getpage(page-1)">
		<input type="button" :value="v" v-for="v in sumpage" @click="getpage(v)">
		<input type="button" value="下一页" @click="getpage(page+1)">
		共{{count}}条数据  共{{sumpage}}页
	</div>
</body>
</html>
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	    news:[],
		page:"",
		size:"",
		count:"",
		sumpage:"",
		
	  },methods:{
		  getpage(page){
			  axios.get("http://127.0.0.1:8080/list?page="+page).then(function(res){
			  	console.log(res.data.data)
			  	app.news=res.data.data
				app.page=res.data.page
				app.size=res.data.size
				app.count=res.data.count
				app.sumpage=res.data.sumpage
			  })
		  }
	  },created() {
	  	axios.get("http://127.0.0.1:8080/list").then(function(res){
			console.log(res.data.data)
			app.news=res.data.data
		})
	  }
	})

</script>